import { useState } from "react";
import { useNavigate } from "react-router-dom";
import {
  ResultPage,
  Card,
  Switch,
  Button,
  Popup,
  CalendarPickerView,
} from "antd-mobile";
import { LoopOutline } from "antd-mobile-icons";
import { useSelector, useDispatch } from "react-redux";
import { exChange, editDate } from "../../store/CitySlice";
import MySwiper from "../../components/MySwiper";
import dayjs from "dayjs";
import styles from "./index.module.css";

const Index = () => {
  const navigate = useNavigate();
  const { start, end, date } = useSelector((state) => state.CitySlice);
  const dispatch = useDispatch();
  // 图片列表
  const images = [
    "https://img.yzcdn.cn/vant/apple-1.jpg",
    "https://img.yzcdn.cn/vant/apple-2.jpg",
    "https://img.yzcdn.cn/vant/apple-3.jpg",
    "https://img.yzcdn.cn/vant/apple-4.jpg",
    "https://img.yzcdn.cn/vant/apple-5.jpg",
    "https://img.yzcdn.cn/vant/apple-6.jpg",
    "https://img.yzcdn.cn/vant/apple-7.jpg",
    "https://img.yzcdn.cn/vant/apple-8.jpg",
  ];

  const [visible1, setVisible1] = useState(false);
  const [isSpeed, setIsSpeed] = useState(false); //是否高铁/动车

  //点击跳转城市页面
  const handelCity = (type) => {
    navigate(`/city/${type}`);
  };

  //交换城市
  const handelEx = () => {
    dispatch(exChange());
  };

  //查询车票
  const handelQueryList = () => {
    //地址栏拼接参数，跳转到列表页
    //navigate(`/list?start=${start}&end=${end}&date=${date}&isSpeed=${isSpeed}`);
    navigate(`/list?isSpeed=${isSpeed}`);
  };

  return (
    <div>
      <ResultPage
        status=""
        title="火车票"
        description="便捷购票，服务您的每一次出行"
      >
        <Card style={{ marginTop: 12 }}>
          <div className={styles.city_wrap}>
            <span onClick={() => handelCity("start")}>{start}</span>
            <LoopOutline fontSize={24} onClick={() => handelEx()} />
            <span onClick={() => handelCity("end")}>{end}</span>
          </div>
          <div className={styles.date_wrap} onClick={() => setVisible1(true)}>
            {date}
          </div>
          <div className={styles.switch_wrap}>
            <Switch checked={isSpeed} onChange={(val) => setIsSpeed(val)} />
            <span>高铁/动车 直达特价</span>
          </div>
          <Button
            block
            color="primary"
            size="large"
            shape="rounded"
            onClick={() => handelQueryList()}
          >
            查询车票
          </Button>
        </Card>
        {/* 调用轮播图组件 */}
        <MySwiper images={images}></MySwiper>
      </ResultPage>

      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
      >
        <CalendarPickerView
          min={dayjs()}
          max={dayjs(dayjs().add(13, "day"))}
          onChange={(val) => {
            //调用仓库的action修改日期
            dispatch(editDate({ date: dayjs(val).format("YYYY-MM-DD") }));
            setVisible1(false);
          }}
        />
      </Popup>
    </div>
  );
};

export default Index;
